<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
      <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item >角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider ></el-divider>
    <!--角色列表下拉选-->
    <div>
    <div style="float: right;position: relative;margin-bottom: 20px">
      <el-select v-model="id" placeholder="请选择角色" >
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <el-button slot="append" type="primary" icon="el-icon-search" @click="roleSearch()" >
        搜索
      </el-button>
    </div>
    <!--添加角色信息-->
    <div style="margin-left: 20px">
      <el-button type="primary" icon="el-icon-plus" @click="roleInsert()">
        添加角色
      </el-button>
      <el-button type="primary" icon="el-icon-user-solid" @click="allRole()">
        全部角色
      </el-button>
    </div>
      <div v-if="search1">
      <el-table
                :data="roleArr"
                style="width: 100%;margin:0 20px 20px 20px" border>
        <el-table-column type="index" label="" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="编号" width="150" align="center"></el-table-column>
        <el-table-column prop="name" label="角色名" align="center"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="400" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="socpe">
            <el-button size="mini" @click="roleUpdate(socpe.row)"
                       type="success"
                       :disabled="socpe.row.id == 1">修改
            </el-button>
            <el-popconfirm
                title="您确定删除此角色吗?"
                @confirm="roleDelete(socpe.$index, socpe.row)">
              <el-button slot="reference" size="mini"
                         type="danger"
                         :disabled="socpe.row.id == 1">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    <!--用户列表结束-->
      </div>
      <div v-else>
        <el-table
            :data="roleSearchArr"
            style="width: 100%;margin:0 20px 20px 20px" border>
          <el-table-column type="index" label="" width="50" align="center"></el-table-column>
          <el-table-column prop="id" label="编号" width="150" align="center"></el-table-column>
          <el-table-column prop="username" label="用户名" align="center"></el-table-column>
          <el-table-column prop="name" label="角色名" align="center"></el-table-column>
          <el-table-column prop="realName" label="真实姓名" align="center"></el-table-column>
          <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="socpe">
              <el-button size="mini" @click="roleUpdate(socpe.row)"
                         type="success">修改
              </el-button>
              <el-popconfirm
                  title="您确定删除此角色吗?"
                  @confirm="roleDelete(socpe.$index, socpe.row)">
                <el-button slot="reference" size="mini"
                           type="danger">删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      /*角色数组*/
      roleArr: [],
      /*查询到的角色数组*/
      roleSearchArr: [],
      /*角色查找下拉框*/
      options: [],
      id: "",
      /*是否显示角色查找表*/
      search1:true,

    };
  },
  methods: {
    // 所有的角色信息
    showAllRoleInfo() {
      let url = "http://localhost:8080/roles/select"
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.roleArr = response.data;
        this.options=response.data;
      })
    },
    /*全部角色按钮*/
    allRole(){
      location.href="/sys-admin/temp/role/list"
    },
    /*角色删除*/
    roleDelete(key,role) {
      let url = 'http://localhost:8080/roles/'+role.id+'/deleteById'
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功");
          location.reload();
        }else {
          this.$message.error("删除失败");
          this.showAllUserInfo();
        }
      })
    },
    /*角色添加*/
    roleInsert() {
      location.href = "/sys-admin/temp/role/list/add-new"
    },
    /*修改角色信息*/
    roleUpdate(role) {
      location.href = "/sys-admin/temp/role/list/update?id=" + role.id;
    },

    roleSearch() {
      let id=this.id;
      if (id == '') {
        this.$message.error("请选择角色名!");
        return;
      }
      let url1 = "http://localhost:8080/roles/selectById?id="+ id
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url1).then((response)=> {
       let name = response.data.data.name;
        let url = "http://localhost:8080/roles/selectByRole?name="+ name
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response)=> {
          this.roleSearchArr = response.data;
          this.id="";
          this.name="";
          this.search1=false;
        })
      })

    }
  },
  mounted() {
    /*分页查找用户信息*/
    this.showAllRoleInfo();
  }
}
</script>